<template>
	<view class="u-p-20">
		<view class="u-p-x-30 rounded-10 bg-white">
			<u-form :model="form" ref="uForm" labelWidth="150">
				<view class="">
					<u-form-item label="真实姓名" prop="real_name">
						<u-input v-model="form.real_name" placeholder="请填写真实姓名" />
					</u-form-item>
					<u-form-item label="身份证号码" prop="id_card">
						<u-input v-model="form.id_card" placeholder="请填写身份证号码" />
					</u-form-item>

					<view class="flex flex-column align-center u-m-t-30">
						<text class="u-font-30 font-weight-bold">身份证正面</text>
						<u-form-item prop="card_front_image" label-width="120">
							<view class="flex-1 flex ">
								<view class="position-relative" style="width: 330rpx;height: 200rpx;">
									<image
										:src="form.card_front_image?($_BASE_IMG_API+form.card_front_image):'../static/mine/shengfen.png'"
										style="width: 330rpx;height: 200rpx;"></image>
									<view v-if="form.card_front_image" class="position-absolute flex justify-center"
										style="background: #fa3534;width: 44rpx; height: 44rpx; border-radius: 100rpx; top: 10rpx; right: 10rpx;"
										@click="frontClear">
										<u-icon name="close" color="#fff" size="20"></u-icon>
									</view>
								</view>
								<view class="flex-1 flex flex-column align-center u-p-l-30">
									<text>需要上传头像，文字清晰边框完整，真实有效的照片</text>
									<u-upload :auto-upload="false"
										@on-choose-complete="(lists,name)=>uploadChange(lists,1)" ref="uUpload1"
										:custom-btn="true" :show-upload-list="false" maxCount="1" :max-size="2 * 1024 * 1024" :show-tips="false" @on-oversize="oversize">
										<view slot="addBtn" class="u-m-t-30" hover-class="slot-btn__hover"
											hover-stay-time="150">
											<u-tag text="点击上传" shape="circle"></u-tag>
										</view>
									</u-upload>
								</view>
							</view>
						</u-form-item>
					</view>
					<view class="flex flex-column align-center u-m-t-30">
						<text class="font font-weight-bold">身份证背面</text>
						<u-form-item prop="card_behind_image" label-width="120">
							<view class="flex-1 flex ">
								<view class="position-relative" style="width: 330rpx;height: 200rpx;">
									<image
										:src="form.card_behind_image?($_BASE_IMG_API+form.card_behind_image):'../static/mine/shengfen2.png'"
										style="width: 330rpx;height: 200rpx;"></image>
									<view v-if="form.card_behind_image" class="position-absolute flex justify-center"
										style="background: #fa3534;width: 44rpx; height: 44rpx; border-radius: 100rpx; top: 10rpx; right: 10rpx;"
										@click="behindClear">
										<u-icon name="close" color="#fff" size="20"></u-icon>
									</view>
								</view>
								<view class="flex-1 flex flex-column align-center u-p-l-30">
									<text>需要上传头像，文字清晰边框完整，真实有效的照片</text>
									<u-upload :auto-upload="false"
										@on-choose-complete="(lists,name)=>uploadChange(lists,2)" ref="uUpload2"
										:custom-btn="true" :show-upload-list="false" maxCount="1" :max-size="2 * 1024 * 1024">
										<view slot="addBtn" class="u-m-t-30" hover-class="slot-btn__hover"
											hover-stay-time="150">
											<u-tag text="点击上传" shape="circle"></u-tag>
										</view>
									</u-upload>
								</view>
							</view>
						</u-form-item>
					</view>
				</view>
			</u-form>
			<view class="u-p-y-50 bg-white">
				<dy-button width="576rpx" size="default" @click="submit">提交</dy-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseImgUrl
	} from "@/api/app.js"
	import {
		mapActions
	} from 'vuex'
	import {
		MineCenterApi
	} from "../../../../api/serves";
	export default {
		data() {
			return {
				type: 0, // 0 企业认证  1 小微认证
				action: baseImgUrl,
				form: {
					real_name: '',
					id_card: '',
					card_front_image: '', // 门面照片
					card_behind_image: '' // 门面照片
				},
				rules: {
					real_name: [{
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}],
					id_card: [{
						validator: (rule, value, callback) => {
							console.log(this.$u.test.idCard(value));
							if (this.$u.test.idCard(value)) {
								callback();
							} else {
								callback(new Error("请输入正确的身份证号"));
							}
						}
					}, ],
					card_front_image: [{
						required: true,
						message: '请选择身份证正面图片',
						trigger: ['blur', 'change']
					}],
					card_behind_image: [{
						required: true,
						message: '请选择身份证反面图片',
						trigger: ['blur', 'change']
					}],
				}
			};
		},
		onUnload() {
			console.log('onUnload');
			uni.setStorageSync('applyForm_2', this.form)
		},
		onLoad(option) {
			let {
				type
			} = option
			this.type = type
			console.log(option);
			console.log('type',this.type);
			let applyForm = uni.getStorageSync('applyForm_2') || {}
			let applyForm1 = uni.getStorageSync('applyForm_1') || {}
			
			if (applyForm) {
				this.form.real_name = applyForm.real_name || applyForm1.real_name || ''
				this.form.id_card = applyForm.id_card || applyForm1.id_card || ''
				this.form.card_front_image = applyForm.card_front_image || applyForm1.card_front_image || ''
				this.form.card_behind_image = applyForm.card_behind_image || applyForm1.card_behind_image || ''
				console.log(applyForm,);
			}
			console.log('applyForm_2', applyForm);
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			...mapActions({
				upload: 'user/upload'
			}),
			oversize(file,lists,name){
				console.log('超出大小',{file,lists,name});
				if(file.size > 2 * 1024 * 1024){
					console.log(this.$u.toast);
					this.$u.toast('上传文件不能超过2M')
				}
				
			},
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						console.log('验证通过');
						console.log(this.type);
						if (this.type == 0) {
							uni.setStorageSync('applyForm_2', this.form)
							uni.navigateTo({
								url: '/pages/mine/mineEnterPages/mineEnterLicense/mineEnterLicense'
							})
						} else {
							console.log('小微入驻');
							let params = {}
							Object.assign(params, uni.getStorageSync('applyForm_1'), this.form)
							uni.showLoading()
							console.log('params',params);
							let api = params.id ? 'applyEditXW' : 'applyAddXW'
							let res = await MineCenterApi[api](params)
							uni.hideLoading() 
							console.log('入驻申请', res); 
							this.$u.toast(res.msg)
							if (res.code == 1) {
								uni.navigateTo({
									url: '/pages/mine/mineEnterPages/mineEnterResult/mineEnterResult?type=add'
								})
							}
						}

					}
				})
			},
			_upload(lists, type) {
				this.upload(lists).then(res => {
					console.log('res1111', res);
					if (res.length > 0) {
						if (type == 1) this.form.card_front_image = res[0]
						if (type == 2) this.form.card_behind_image = res[0]
						console.log('this.form', this.form);
					}
				})
			},
			uploadChange(lists, type) {
				this._upload(lists, type)
			},
			// 删除身份证正面照
			frontClear() {
				this.$refs.uUpload1.lists = []
				this.form.card_front_image = ''
			},
			// 删除身份证背面照
			behindClear() {
				this.$refs.uUpload2.lists = []
				this.form.card_behind_image = ''
			}
		}
	}
</script>

<style lang="scss">

</style>